<template>
  <view class="file-main" @touchmove.pause.prevent="" @click="close">
    <u-popup class="files" :show="showFile" mode="center">
      <!-- <audio id="" src="" controls></audio> -->
      <view class="box" :style="{ border: `${boxStyle.border}` }">
        <video
          style="height: 650rpx; width: 650rpx; border-radius: 10rpx;"
          v-if="type == 'video'"
          ref="video"
          :src="info.url"
        ></video>
        <image
          v-else-if="type == 'img'"
          :src="info.url"
          class="box-img"
          mode="widthFix"
        />
        <view class="audio" v-else @click="play">
          <image class="bg" src="/static/audio.png" mode="widthFix" />
          <image
            class="cover"
            :src="info.icon"
            mode="scaleToFill"
            :style="{ transform: animationData }"
          />
          <view class="audio-play">
            <image
              class="preview-icon"
              src="/static/play-fill.png"
              mode="widthFix"
              v-if="playState == 'pause' || playState == 'stop'"
            />
            <image
              v-else
              class="preview-icon"
              src="/static/pause-fill.png"
              mode="widthFix"
            />
          </view>
        </view>
        <!-- 关闭按钮 -->
        <view class="box-close" @click="close">
          <image src="/static/close.png" mode="scaleToFill" />
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  created() {
    this.init()
  },
  data() {
    return {
      showFile: false,
      zoom: true,
      timer: '',
      playState: 'pause',
      type: '',
      fileAudio: '', // 音频文件
      animationData: '',
      imgDeg: 0,
      // 文件类型列表
      fileType: {
        // 图片
        img: {
          url: '/static/school/file/img.png',
          class: 'imgs',
          name: '图文',
          type: 'img',
        },
        png: {
          url: '/static/school/file/img.png',
          class: 'video',
          name: '图片',
          type: 'img',
        },
        jpg: {
          url: '/static/school/file/img.png',
          class: 'video',
          name: '图片',
          type: 'img',
        },
        ico: {
          url: '/static/school/file/img.png',
          class: 'video',
          name: '图片',
          type: 'img',
        },
        jpeg: {
          url: '/static/school/file/img.png',
          class: 'video',
          name: '图片',
          type: 'img',
        },
        jpeg: {
          url: '/static/school/file/img.png',
          class: 'video',
          name: '图片',
          type: 'img',
        },
        bmp: {
          url: '/static/school/file/img.png',
          class: 'video',
          name: '图片',
          type: 'img',
        },
        svg: {
          url: '/static/school/file/img.png',
          class: 'video',
          name: '图片',
          type: 'img',
        },
        gif: {
          url: '/static/school/file/img.png',
          class: 'video',
          name: '图片',
          type: 'img',
        },
        tif: {
          url: '/static/school/file/img.png',
          class: 'video',
          name: '图片',
          type: 'img',
        },

        // 视频
        mp4: {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '视频',
          type: 'video',
        },
        wav: {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '音频',
          type: 'video',
        },
        mpeg: {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '音频',
          type: 'video',
        },
        video: {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '视频',
          type: 'video',
        },
        flv: {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '视频',
          type: 'video',
        },
        f4v: {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '视频',
          type: 'video',
        },
        webm: {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '视频',
          type: 'video',
        },
        m4v: {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '视频',
          type: 'video',
        },
        mov: {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '视频',
          type: 'video',
        },
        m2v: {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '视频',
          type: 'video',
        },
        mkv: {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '视频',
          type: 'video',
        },
        '3gp': {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '视频',
          type: 'video',
        },
        '3gp': {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '视频',
          type: 'video',
        },
        '3g2': {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '视频',
          type: 'video',
        },
        rmvb: {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '视频',
          type: 'video',
        },
        rm: {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '视频',
          type: 'video',
        },
        wmv: {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '视频',
          type: 'video',
        },
        wma: {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '视频',
          type: 'video',
        },
        avi: {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '视频',
          type: 'video',
        },
        asf: {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '视频',
          type: 'video',
        },
        mpeg: {
          url: '/static/school/file/video.png',
          class: 'video',
          name: '视频',
          type: 'video',
        },
        // 音频
        mp3: {
          url: '/static/school/file/video.png',
          class: 'audio',
          name: '音频',
          type: 'audio',
        },
        wma: {
          url: '/static/school/file/video.png',
          class: 'audio',
          name: '音频',
          type: 'audio',
        },
        wav: {
          url: '/static/school/file/video.png',
          class: 'audio',
          name: '音频',
          type: 'audio',
        },
        ape: {
          url: '/static/school/file/video.png',
          class: 'audio',
          name: '音频',
          type: 'audio',
        },
        flac: {
          url: '/static/school/file/video.png',
          class: 'audio',
          name: '音频',
          type: 'audio',
        },
        ogg: {
          url: '/static/school/file/video.png',
          class: 'audio',
          name: '音频',
          type: 'audio',
        },
        aac: {
          url: '/static/school/file/video.png',
          class: 'audio',
          name: '音频',
          type: 'audio',
        },
      },
      boxStyle: {
        border: '2rpx solid rgba(255,255,255,0.5)',
      },
    }
  },

  methods: {
    async init() {
      // this.zoom = uni.getSystemInfoSync().platform == 'android'
    },
    open() {
      this.imgDeg = 0
      this.type = this.fileType[this.info.type].type
      // 图片文件
      if (this.type == 'img') {
        this.showFile = true
      } else if (this.type == 'video') {
        // 视频
        this.showFile = true
      } else if (this.type == 'audio') {
        this.boxStyle.border = ''
        // 音频
        this.fileAudio = uni.createInnerAudioContext({
          useWebAudioImplement: false,
        })
        this.fileAudio.src = this.info.url
        this.fileAudio.loop = true
        // 无限循环动画
        this.timer = setInterval(() => {
          if (this.playState == 'play') {
            this.imgDeg = this.imgDeg + 1 == 360 ? 0 : this.imgDeg + 1
            this.animationData = `rotateZ(${this.imgDeg}deg)`
          }
        }, 50)
        this.showFile = true
      }
    },
    close() {
      this.fileAudio ? this.fileAudio.pause() : ''
      this.playState = 'stop'
      this.showFile = false
      clearInterval(this.timer)
      this.$emit('close')
    },
    play() {
      if (this.playState == 'pause' || this.playState == 'stop') {
        this.fileAudio.play()
        this.playState = 'play'
      } else if (this.playState == 'play') {
        this.fileAudio.pause()
        this.playState = 'pause'
      }
    },
    pause() {
      this.fileAudio.pause()
      this.playState = 'pause'
    },
  },
  beforeDestroy() {
    this.fileAudio ? this.fileAudio.pause() : ''
    this.playState = 'pause'
    clearInterval(this.timer)
  },

  props: ['info'],
}
</script>

<style lang="scss" scoped>
.box {
  width: 650rpx;
  margin: 0 auto;
  max-width: fit-content;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  // border: 4rpx solid #fff;
  padding: 2rpx;
  border-radius: 10rpx;
  .audio {
    position: relative;
    width: 630rpx;
    height: 630rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    .bg {
      width: 100%;
      height: 100%;
    }
    .cover {
      position: absolute;
      // left: 50%;
      // top: 50%;
      // transform: translate(-50%, -50%);
      // left: calc(325rpx - 200rpx);
      // top: calc(325rpx - 200rpx);
      width: 190rpx;
      height: 190rpx;
      border-radius: 50%;
      // transition: 0.3s;
    }
    .audio-play {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      z-index: 1;
      width: 70rpx;
      height: 70rpx;
      border-radius: 50%;
      overflow: hidden;
      background-color: rgba(0, 0, 0, 0.5);
      image {
        width: 50rpx;
        height: 50rpx;
      }
    }
    .box-img {
      width: 100%;
      height: 100%;
    }
    video {
      height: 600rpx;
    }
  }
  .box-close {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -120rpx;
    opacity: 0.5;
    image {
      width: 80rpx;
      height: 80rpx;
    }
  }
  .box-img {
    border-radius: 10rpx;
  }
}
::v-deep .u-popup__content {
  align-content: center !important;
  align-items: center !important;
  justify-content: center !important;
}
</style>
